<template>
  <div class="all_comment">
    <div class="top_nav">
      <div class="nav">
        <span class="iconfont icon-youjiantou1" @click="back"></span>
        <i>全部评论(13131)</i>
      </div>
    </div>
    <div class="floor">
      <ul>
        <li >
          <div class="left">
            <div class="img">
              <img src="../../assets/img/01.jpg" alt="" />
            </div>
          </div>
          <div class="right">
            <!-- 网友名字 -->
            <p class="name">男士网yy98.cc <span class="level">Lv.1</span></p>

            <p class="rate">
              <van-rate
                v-model="value"
                :size="10"
                color="#ffd21e"
                void-icon="star"
                void-color="#eee"
              />
              <span class="time">6月30号 18:30</span>
            </p>
            <p class="content" @click="showReply = true">
              文字是人类用符号记录表达信息以传之久远的方式和工具。现代文字大多是记录语言的工具。人类往往先有口头的语言后产生书面文字，很多小语种，有语言但没有文字。文字的不同体现了国家和民族的书面表达的方式和思维不同。文字使人类进入有历史记录的文明社会
            </p>
            <div class="icon">
              9 <span class="iconfont icon-dianzan"></span>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <!-- 下面不可编辑的评论区 -->
    <div class="fake_comment">
      <input
        @click="writerCommnet = true"
        type="text"
        readonly
        placeholder="写长评当大事,接受众人的膝盖~"
      />
      <span class="iconfont icon-bi"></span>
    </div>

    <!-- 评论某楼层组件 -->
    <reply-floor
      v-if="showReply"
      @change-show-reply="changeShowReply"
    ></reply-floor>
    <!-- 写评论 -->
    <write-comment
      v-if="writerCommnet"
      @change-writer-commnet="changeWriterCommnet"
    ></write-comment>
  </div>
</template>

<script>
import ReplyFloor from "./ReplyFloor.vue";
import WriteComment from "./WriteComment.vue";
export default {
  components: { ReplyFloor, WriteComment },

  data() {
    return {
      value: 5,
      showReply: false,
      writerCommnet: false,
    };
  },
  methods: {
    back() {
      this.$emit("change-show-all-comment", false);
    },
    changeWriterCommnet(event) {
      this.writerCommnet = event;
    },
    changeShowReply(event) {
      this.showReply = event;
    },
  },
};
</script>

<style lang="less" scoped>
.all_comment {
  position: fixed;
  top: 0;
  height: 0;
  z-index: 50;
  width: 100%;
  background: #fff;
  height: 100%;
  .top_nav {
    // background-color: #fff;
    padding: 0 13px 0 13px;
    border-bottom: 1px solid #f3f3f3;
    .nav {
      display: flex;
      align-items: center;
      height: 35px;
      span {
        color: #706e6b;
        font-size: 15px;
        font-weight: 600;
      }
      i {
        font-size: 18px;
        flex: 1;
        display: block;
        width: 100%;
        text-align: center;
        font-style: normal;
      }
    }
  }
  .floor {
    padding: 0 13px;
    ul {
      li {
        display: flex;
        padding: 13px 0;
        position: relative;
        //   margin-top: 24px;
        //左侧头像
        .left {
          width: 30px;
          height: 30px;
          img {
            height: 30px;
            width: 30px;
            border-radius: 50%;
          }
        }
        //右侧
        .right {
          flex: 1;
          margin-left: 15px;
          p:not(:nth-of-type(1)) {
            margin-top: 5px;
          }
          .name {
            font-size: 12px;
            color: #7fbaf0;
            span {
              transform: scale(0.8);
              display: inline-block;
              width: 20px;
              height: 12px;
              font-size: 12px;
              color: #f7caca;
              background: #fff;
              border: 1px solid #f7caca;
            }
          }
          .time {
            color: #a2a2a2;
            font-size: 12px;
            margin-left: 10px;
          }
          .content {
            width: 100%;
            font-size: 16px;
            word-break: break-all;
            white-space: wrap;
            color: #24221f;
          }
          .icon {
            position: absolute;
            right: 0;
            top: 15px;
            color: #a2a2a2;
            font-size: 12px;
          }
        }
      }
    }
  }
  .fake_comment {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px;
    background-color: #d8d8d8;
    display: flex;
    justify-content: center;
    align-items: center;
    input[type="text"] {
      height: 60%;
      width: 90%;
      border-radius: 10px;
      border: none;
      padding-left: 30px;
    }
    .iconfont {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 30px;
    }
  }
}
</style>